<template>
	<view class="lang">
		<view class="selder" :style="{background:bgcolor?bgcolor:''}" @click="changelang">
			<text>{{langindex==1?'汉':'' }}</text>
			<text>{{langindex==0?'ئۇ':'' }}</text>
			<div :class="langindex==1?'item right':'item left'">{{langindex==1?'ئۇ':'汉'}}</div>
		</view>
	</view>
</template>

<script>

	export default {
		name: "Lang",
			props:['bgcolor'],
		data() {
			return {
				langindex:this.$store.state.lang=='ug'?1:0
			};
		},
		methods: {
			changelang() {
				// console.log(this.langindex)
				if (this.langindex == 0) {
					this.langindex = 1;
					this.$i18n.locale = 'ug';
					this.$store.commit('setLang', 'ug');
				} else {
					this.langindex = 0;
					this.$i18n.locale = 'cn';
					this.$store.commit('setLang', 'cn');
				}

			},
			
		}
	}
</script>

<style lang="scss">
	.lang {
		display: flex;
		align-items: center;
		flex: 1;

		.selder {
			width: 130rpx;
			height: 45rpx;
			border-radius: 40rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx;
			position: relative;
			backdrop-filter: blur(10rpx);
			font-size: $uni-font-size-base;

			text {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $uni-color-title;

			}

			.item {
				width: 50rpx;
				height: 50rpx;
				border-radius: 100%;
				background-color: $uni-color-topic;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				// transition:left 2s;
				// transition:right 2s;
				transition: all .5s;
				color: #fff;
			}

			.left {
				left: 15rpx;

			}

			.right {
				left: 85rpx;
			}
		}
	}
</style>